// todo ===== 登录注册表单 =====
$('#showReg').on('click', function () {
    $('.reg-form').show()
    $('.login-form').hide()
})

$('#showLogin').on('click', function () {
    $('.reg-form').hide()
    $('.login-form').show()
})

//todo ===== 自定义效验 =====
let form = layui.form
form.verify({
    // 我们即支持 上述函数式的方式  也支持下述数组的形式
    // 数组的两个分别代表：[数组匹配：匹配不符时的提示文件] 
    // post 对密码效验
    // 第一个验证规则，验证密码长度必须是6~12位
    pwd: [/^\S{6,12}$/, '密码长度必须是6~12位，并且不能有空格'],

    // 验证两次密码是否一致
    repwd: function (value) { // value:表单的值  item： 表单的dom对象
        // value 表示确认密码
        // 1.获取到密码框的内容(用自定义属性获取)
        // 2.确认密码框的内容(value) 和密码框的内容 作比较  比较的值不一样就是就需要提示
        // 1.
        let pwd = $("#pwd").val(); // 获取注册框中密码
        // 2.
        if (value !== pwd) {
            return '两次密码不一致';
        }
    }
})


//todo ========= 通过 ajax 完成注册功能 ===========
/*  axios
步骤
1.注册表单注册submit事件
2.阻止表单的默认行为
3.收集表单数据
4.axios 发请求
*/
let layer = layui.layer
$('.reg-form').on('submit', function (e) {
    e.preventDefault()
    // ! 注意表单每一项都需要添加name属性
    const data = $(this).serialize();
    // console.log(data)
    // ! 该接口不支持FormData(),所以一下代码无效(后端不支持)

    // 语法 axios.post(url,data,config)
    axios.post('/api/reguser', data)
        .then(({
            data: {
                status,
                message
            }
        }) => {
            // console.log(res)
            if (status !== 0) {
                // if 成立说明注册失败
                return layer.msg(message)
            }
            // 走到这，说明注册成功
            layer.msg(message)
            // 注册成功 显示 登录界面
            $("#showLogin").click()
        })
    $('.reg-form')[0].reset()

})

// todo ========登录功能=============
$('.login-form').on('submit', function (e) {
    e.preventDefault()
    const data = $(this).serialize()
    axios.post('/api/login', data)
        .then(({
            data
        }) => {
            console.log(data)
            const {
                message,
                status,
                token
            } = data

            if (status !== 0) {
                // if 成立 说明登录失败
                return layer.msg(message)
            }
            // 登录成功
            // layer.msg(message)
            // 把token 令牌给本地存储
            localStorage.setItem('token', token)
            // 需要跳转页面（index.html）
            //   / 在服务器中表示跟目录
            // eg
            layer.msg(message, {
                icon: 1,
                time: 2000 // 设置 2 秒后自动关闭
            }, function () {
                // 关闭后 跳转操作
                location.href = '/index.html'
            });
        })

})